<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 表格区域 -->
    <div>
      <class-history-table
        :data="tableData"
        :loading="loading"
      />
    </div>

    <!-- 分页区域 -->
    <div v-if="total > 0" class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
import { classHistoryByStudent } from '@/api/wordSystemCourse'
import ClassHistoryTable from '@/views/student/components/ClassHistoryTable.vue'

export default {
  name: 'ClassHistoryTableDialog',
  components: { ClassHistoryTable },
  props: {
    // 对话框标题
    title: {
      type: String,
      default: `学生上课历史记录`
    },
    // 对话框是否可见
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框宽度
    dialogWidth: {
      type: String,
      default: '90%'
    },
    student: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 加载状态
      loading: false,
      // 总条数
      total: 0,
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 查询表单
      searchForm: {
        rechargeTimeRange: [],
        rechargeStatus: ''
      }
    }
  },
  created() {
    this.currentPage = 1
    if (this.student) {
      this.title = `${this.student.name}的上课历史记录`
    }
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      // 构造查询参数
      console.log('this.searchForm.rechargeTimeRange', this.searchForm.rechargeTimeRange)
      const params = {
        page: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },
        param: {
          studentId: this.student.id,
          rechargeStatus: this.searchForm.rechargeStatus
        }
      }

      if (this.searchForm.rechargeTimeRange) {
        params.param.startRechargeTime = this.searchForm.rechargeTimeRange[0] || ''
        params.param.endRechargeTime = this.searchForm.rechargeTimeRange[1] || ''
      }

      // 调用API获取数据（此处替换为实际接口调用）
      const response = await classHistoryByStudent(params)
      this.tableData = response.records
      this.total = response.total * 1
      this.loading = false
    },

    // 处理查询
    handleSearch() {
      this.currentPage = 1
      this.loadData()
    },

    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        operatorName: '',
        studentName: '',
        rechargeTimeRange: [],
        rechargeStatus: ''
      }
      this.currentPage = 1
      this.loadData()
    },

    // 处理每页条数变化
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.loadData()
    },

    // 处理页码变化
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadData()
    },

    // 处理对话框关闭
    handleClose() {
      this.$emit('update:visible', false)
      // 重置表单
      this.resetSearch()
    }
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 10px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>
